<template>
	<div>
	
	  
	   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	      <div id="main" style="width: 600px;height:400px;"></div>
		   <div id="salaryDistribute" style="width: 600px;height:400px;"></div>
		    <div id="boyVsGirl" style="width: 600px;height:400px;"></div>
	   
	</div>
</template>
<script>
  var echarts = require('echarts');
export default {
  name: 'StaticalTest.vue',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
	  employeeData:[],
	  salary:[],
	  mount:[],
	 
	  manvswowen:[]
    }
  },
  mounted () {
	  
   this.getRequest("/statistic/employeeMount").then(res=>{
   
	this.employeeData.push(res.sumMount);
	this.employeeData.push(res.onWorkMount);
	
	this.employeeData.push(res.offWorkMount);
console.log("===="+this.employeeData);	
this.drawLine();
   
   }).catch(err=>{
   	console.log(err);
   });this.getRequest("/statistic/salaryDistribute").then(res=>{
	   res.forEach((item,index)=>{
	   		  
			   this.salary.push( item.salary) ;
			   this.mount.push(item.mount)  ;
			   this.drawLine2();
   })
  
	
   
   }).catch(err=>{
   	console.log(err);
   });this.getRequest("/statistic/boyVsGirl").then(res=>{
	  console.log("==男比女"+res);
	  this.manvswowen.push(res.mountOfBoy);
	  this.manvswowen.push(res.mountOfGirl);

	   this.drawLine3();

	
   
   }).catch(err=>{
   	console.log(err);
   })
	
  },
  methods: {
    drawLine () {
    
     // 基于准备好的dom，初始化echarts实例
             var myChart = echarts.init(document.getElementById('main'));
			var data = this.employeeData;
      
             // 指定图表的配置项和数据
             var option = {
                 title: {
                     text: '员工数量'
                 },
                 tooltip: {},
                 legend: {
                     data:['数量']
                 },
                 xAxis: {
                     data: ["总员工数量","在职员工数量","离职员工数量"]
                 },
                 yAxis: {},
                 series: [
					 {
                     name: '销量',
                     type: 'bar',
                     data: data
                 }]
             };
      
             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);
    },drawLine2 () {
    
     // 基于准备好的dom，初始化echarts实例
             var myChart = echarts.init(document.getElementById('salaryDistribute'));
			var salary = this.salary;
			var mount = this.mount;
      
             // 指定图表的配置项和数据
             var option = {
                 title: {
                     text: '工资分布'
                 },
                 tooltip: {},
                 legend: {
                     data:['薪资']
                 },
                 xAxis: {
                     data: salary
                 },
                 yAxis: {},
                 series: [
					 {
                     name: '销量',
                     type: 'bar',
                     data: mount
                 }]
             };
      
             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);
    }, drawLine3 () {
    
     // 基于准备好的dom，初始化echarts实例
             var myChart = echarts.init(document.getElementById('boyVsGirl'));
			var manvswowen = this.manvswowen;
			console.log("tian"+manvswowen);
      
             // 指定图表的配置项和数据
             var option = {
                 title: {
                     text: '男女比例'
                 },
                 tooltip: {},
                 legend: {
                     data:['数量']
                 },
                 xAxis: {
                     data: ["男","女"]
                 },
                 yAxis: {},
                 series: [
					 {
                     name: '数量',
                     type: 'bar',
                     data: manvswowen
                 }]
             };
      
             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);
    }
  }
}

</script>

<style>
</style>
